<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>我的博客 - 倾城の陌</title>
    
    <!-- jQuery(Bootstrap的JavaScript插件需要引入jQuery，务必在bootstrap.min.js之前引入) -->
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	
	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" data-integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" data-crossorigin="anonymous">
	
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" data-integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" data-crossorigin="anonymous"></script>
	
	<link rel="stylesheet" type="text/css" href="live2d/waifu.css"/>
	
	<link rel="stylesheet" type="text/css" href="static/nav.css"/>
	<script charset="utf-8" src="static/nav.js"></script>
</head>

<body>
<!-- 背景色 -->
<div class="body-color"></div>

<!-- 导航栏 -->
<nav class="nav_load"></nav>

<div class="waifu">
	<div class="waifu-tips"></div>
	<canvas id="live2d" width="280" height="600" class="live2d"></canvas>
	<div class="waifu-tool">
		<span class="fui-home"></span>
		<span class="fui-chat"></span>
		<span class="fui-eye"></span>
		<span class="fui-user"></span>
		<span class="fui-photo"></span>
		<span class="fui-info-circle"></span>
		<span class="fui-cross"></span>
	</div>
    <script src="live2d/live2d.js"></script>
	<script src="live2d/waifu-tips.js"></script>
</div>

<button id="prev" style="border: 0; outline: none; background-color: transparent; display:none;" value="prev" onclick="prev()">
	<span class="glyphicon glyphicon-chevron-up" style="font-size: 2vw"></span>
</button>
<button id="next" style="border: 0; outline: none; background-color: transparent;" value="#contact" onclick="next()">
	<span class="glyphicon glyphicon-chevron-down" style="font-size: 2vw"></span>
</button>

<div class="container-fluid">
	<div id="content" class="row">
		<div id="title" class="col-xs-8 col-xs-offset-2">
			<p class="text-left" style="font-size: 8vw; font-family: '宋体';">倾城の陌</p>
			<p class="text-center" style="font-size: 5vw; font-family: '宋体';">欢迎访问我的个人博客！</p>
		</div>
		
		<div id="contact" class="col-xs-8 col-xs-offset-2" style="display:none;">
			<p class="text-left" style="font-size: 3vw; font-family: '宋体';">Contact：</p>
			<div class="row">
				<div class="col-xs-10 col-xs-offset-1">
					<ul>
						<li>QQ: 876868792</li>
						<li>WeChat: Nobel-Angle</li>
						<li>Phone: +86 13522097400</li>
						<li>E-mail: suzengxin@foxmail.com</li>
						<li>Site: <a href="https://szxck.top" target="_blank">https://szxck.top</a></li>
						<li>GitHub: <a href="https://github.com/suzengxin" target="_blank">https://github.com/suzengxin</a></li>
						<li>Blog: <a href="https://szxck.gitee.io>https://szxck.gitee.io</a></li>
					</ul>
				</div>
			</div>	
		</div>
		
		<div id="sign" class="col-xs-8 col-xs-offset-2" style="display:none;">
			<p class="text-center" style="font-size: 5vw; font-family: '宋体';">陌上颜如玉</p>
			<p class="text-center" style="font-size: 5vw; font-family: '宋体';">公子世无双</p>
		</div>
 	</div>
</div>
	
</body>
<style>
	body {
		background-image: url("images/dnf_01.jpeg");
		background-repeat: no-repeat;
		background-size: cover;
		-webkit-background-size: cover;
		-o-background-size: cover;
		-moz-background-size: cover;
		-ms-background-size: cover;
	}
	
	.body-color {
		position: absolute;
		height:100%;
		width: 100%;
		background-color: rgba(255, 255, 255, 1);
	}
	
	#title, #contact, #sign {
	    top: 24vh;
	}
	
	#contact ul li{
		font-size: 2vw; 
		font-family: '宋体';
	}
	
	#contact ul li a:hover{
		color: red;
		text-decoration: none;
	}
	
	#prev {
		position: absolute;
		right: 5px;
  		top: 5px;
	}
	#next {
		position: absolute;
		right: 0px;
  		bottom: 5px;
	}
	#next:hover, #prev:hover {
		color: red;
		cursor: pointer;
	}
</style>

<script>
	$(function(){
		var w = document.documentElement.clientWidth;
	    var h = document.documentElement.clientHeight;
		content.setAttribute("style", "height: "+h+"px; width: "+w+"px;");
	})
	
	//淡入淡出效果
	function bodyColor() {
		$(".body-color").fadeOut(500);
	    $(".body-color").fadeIn(500);
	}
	
	//标签页ID标识
	var ids = ["#title", "#contact", "#sign"];
	
	//下一页
	function next(){
		var val = $("#next").val();
		divhide(val);
			
		if (val == ids[ids.length - 1]) {
			$("#next").hide();
		}
		
		$("#prev").show();
	}
	//上一页
	function prev(){
		var val = $("#prev").val();
		divhide(val);
		
		if (val == ids[0]) {
			$("#prev").hide();
		}
		
		$("#next").show();
	}
	//标签页淡入淡出效果
	function divhide(val) {
		bodyColor();
		for(var num = 0; num < ids.length; num++){
			var id = ids[num];
			$(id).fadeOut(0);
			
			if(id == val) {
				if(num != 0) {
					$("#prev").val(ids[num-1]);
				}
				if(num != (ids.length - 1)) {
					$("#next").val(ids[num+1]);
				}
			}
		}
		$(val).fadeIn(500);
	}
</script>

</html>